<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	    <title>秒杀 - 登录</title>
	
	    <link href="${ctxPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	    <link href="${ctxPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
	    <link href="${ctxPath}/static/css/animate.css" rel="stylesheet">
	    <link href="${ctxPath}/static/css/style.css?v=4.1.0" rel="stylesheet">
	    
	    <script>if (window.top !== window.self) {
	        window.top.location = window.location;
	    }</script>
	    <script src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
	    <script src="${ctxPath}/static/js/bootstrap.min.js?v=3.3.6"></script>
	    <!-- jquery-validator -->
	    <script type="text/javascript" src="${ctxPath}/static/plugins/jquery-validation/jquery.validate.min.js"></script>
	    <script type="text/javascript" src="${ctxPath}/static/plugins/jquery-validation/localization/messages_zh.min.js"></script>
	    <!-- layer -->
	    <script type="text/javascript" src="${ctxPath}/static/plugins/layer/layer.js"></script>    
	</head>
	
	<body class="gray-bg">
	
		<div class="text-center loginscreen animated fadeInDown">
		    <div style="padding: 100px 0px;">
		        <div>
		            <h1 class="logo-name">欢迎秒杀</h1>
		        </div>

		        <br/><br/><br/><br/><br/><br/><br/><br/>
      
				<form name="loginForm" id="loginForm" method="post"  style="width:30%; margin:0 auto;">
<!--  				
					<h2 style="text-align:center; margin-bottom: 20px">用户登录</h2>
-->					
					<div class="form-group">
				       	<div class="row">
					       	<label class="form-label col-md-4">请输入手机号码</label>
					        <div class="col-md-8">
					        	<input id="mobile" name = "mobile" class="form-control" type="text" placeholder="手机号码" required="true"  minlength="11" maxlength="11" />
					    	</div>
					    	<div class="col-md-1">
					    	</div>
				    	</div>
				    </div>
				    
				    <div class="form-group">
				     		<div class="row">
						        <label class="form-label col-md-4">请输入密码</label>
						        <div class="col-md-8">
						        	<input id="password" name="password" class="form-control" type="password"  placeholder="密码" required="true" minlength="6" maxlength="55" />
					       		</div>
				      		</div>
					</div>
					
					<div class="row" style="margin-top:40px;">
						     	<div class="col-md-6">
					       	 		<button class="btn btn-primary btn-block" type="reset" onclick="reset()">重置</button>
					       	 	</div>
					       	 	<div class="col-md-6">
					       	 		<button class="btn btn-primary btn-block" type="submit" onclick="login()">登录</button>
					       	 	</div>
					 </div>
					 
				</form>		        
		    </div>
		</div>

	</body>
</html>

<!-- 自定义js -->
<script type="text/javascript" src="${ctxPath}/static/modular/common.js"></script>  
<script>
	// 检查是否直接跳转到首页
	function jumpIndex() {
	    // 页面加载查看是否已经有token了,有token直接跳到首页
	    if (g_getCookieVar("token") != null) {
	    	window.location.href = "${ctxPath}/view/websocket";
	    }		
	}

	$(function () {
		jumpIndex();
	});

	function login() {
		$("#loginForm").validate({
	        submitHandler:function(form) {
	             doLogin();
	        }    
	    });
	}
	
	function doLogin() {
		g_showLoading();

		$.ajax({
			url: "${ctxPath}/data/loginAuthPost",
		    type: "POST",
		    contentType: "application/json;charset=UTF-8",
		    data: JSON.stringify({
		    	mobile: $("#mobile").val(),
		    	password: $("#password").val()
		    }),
		    success: function(data) {
		    	g_removeLoading();
		    	
		    	if (data.code == 0) {
		    		layer.msg("登录成功");
		    		
		    		jumpIndex();
		    	} else {
		    		layer.msg(data.msg);
		    	}
		    },
		    error: function(){
		    	g_removeLoading();
		    }
		});
	}
</script>